<template>
  <!-- 本届成员所获奖项展示页面-->
  <section class="pt-120 pb-150" id="current">
    <div class="container">
      <div class="col-lg-4">
        <aside>
          <!-- single sidebar widget -->
          <div class="single-sidebar-widget mb-30">
            <div class="search-bar-widget">
              <div class="search-form parsley-validate">
                <el-form ref="form" @submit.native.prevent>
                  <el-input
                    v-model="inputSearch"
                    placeholder="搜索一下~"
                    validate="required|message:请重新输入"
                    @keyup.enter.native="onSubmitFunction"
                  />
                </el-form>
              </div>
            </div>
          </div>
          <!--End of  single sidebar widget -->
        </aside>
      </div>
      <div class="row" id="top">
        <div class="col-lg-12">
          <viewer :images="dataList">
          <div class="blog-list-inner row">
            <!-- single actives inner -->

            <div class="single-blog-inner col-lg-6" v-for="(item,index) in dataList" :key="index">
              <!-- actives image -->
              <div class="post-image">
                <!--点击图片放大-->
<!--                <viewer class="screen-view">-->
                  <img class="screen-img" :src="item.img">
<!--                </viewer>-->
              </div>
              <!--/.End of  actives image -->

              <!-- post content -->
              <div class="post-content">
                  <div class="post-details">
                    <div class="post-info d-flex">
                      <span class="name">获奖人：{{ item.ownnerName }}</span>
                    </div>

                    <div class="post-title">
                      <h3>奖项的名称：{{ item.honorName }}
                      </h3>
                    </div>
                  </div>
              </div><!-- /.End of post content -->
            </div><!-- /.End of single actives inner -->
            <!--            single actives inner-->

          </div>
          </viewer>
          <!--          <el-button-->
          <!--            type="primary"-->
          <!--            @click="openFullScreen1"-->
          <!--            v-loading.fullscreen.lock="fullscreenLoading">-->
          <!--            指令方式-->
          <!--          </el-button>-->
          <!-- actives pagination -->
          <ul class="theme-pagination pt-sans pagination align-items-center">
            <!--            上一页箭头-->
            <li @click="handleClickPre" v-loading.fullscreen.lock="fullscreenLoading"
                element-loading-text="拼命加载中"><a><i class="fa fa-angle-left"></i></a></li>
            <!--            class="active"-->

            <li v-for="(item,index) in pageBarList" @click="handleChangePage(item)" :key="index"
                :class="[{'active':currentPage==item}]"><a href="#top">{{ typeof (item) === "number" ? item : '...' }}</a></li>
            <!--            下一页箭头-->
            <li @click="handleClickNext"><a href="#top"><i class="fa fa-angle-right"></i></a></li>
          </ul>
          <!--End of actives pagination -->
        </div>
      </div>

    </div>
  </section>
</template>

<script>
import {Api} from "@/request/Api";
import {Loading} from 'element-ui';

let loading;
const startLoading = () => {  // 使用Element loading-start 方法
  loading = Loading.service({
    lock: true,
    text: '加载中……',
    background: 'rgba(0, 0, 0, 0.7)'
  });
};

import Vue from 'vue';
//引入点击放大所需的依赖
import Viewer from 'v-viewer';
import 'viewerjs/dist/viewer.css';
//注册该组件
Vue.use(Viewer)
//自定义配置
Viewer.setDefaults({
  Options: {
    'inline': true,
    'button': true,
    'navbar': true,
    'title': false,
    'toolbar': true,
    'tooltip': true,
    'movable': true,
    'zoomable': true,
    'rotatable': true,
    'scalable': true,
    'transition': true,
    'fullscreen': true,
    'keyboard': true,
    'url': 'data-source'
  }
})
// Loading.service(options);
export default {
  name: "CurrentMember",
  data() {
    return {
      inputSearch: '',
      loading: false,
      currentDate: '2021-06-01',
      //加载动画
      fullscreenLoading: false,
      // 总的数据
      dataList: [],
      // 每页显示数量
      pageSize: 8,
      // 总页数
      pageTotal: 1,
      // 当前页，默认第一页
      currentPage: 1,
      // 页码列表
      pageBarList: [],
      params: {}
    }
  },
  created: function () {
    this.memberList();
  },
  methods: {
    //搜索
    onSubmitFunction(e) {
      console.log(e, this.inputSearch)
      this.params = {
        honorName: this.inputSearch,
      }
      this.memberList()
      console.log(this.params)
    },
    //加载
    openFullScreen1() {
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.fullscreenLoading = false;
      }, 200);
    },
    //上一页
    handleClickPre() {
      if (this.currentPage == 0) {
        alert("已到第一页！")
        return;
      } else {
        this.openFullScreen1()
        this.dataList = []
        this.fullscreenLoading = true;
        this.currentPage -= 1;
        this.memberList();
      }
    },
    //下一页
    handleClickNext() {

      if (this.currentPage == this.pageTotal) {
        alert("没有了哦")
        return;
      } else {
        this.dataList = []
        this.currentPage += 1;
        this.memberList();
        this.openFullScreen1()
      }
    },
    //点击到某一页
    handleChangePage(e) {
      this.dataList = []
      if (e === "前") {
        this.currentPage = this.currentPage - 1;
        this.pageBarList = this.calcPageNum()
        console.log(this.currentPage, "点击到三个点")
      } else if (e === '后') {
        this.currentPage = this.currentPage + 1;
        this.pageBarList = this.calcPageNum()
      } else {
        this.currentPage = e;
        console.log(this.currentPage, "点击到某一个数字页")
      }
      this.memberList();
      this.openFullScreen1()
    },
    //获取分页
    async memberList() {
      let data = {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      console.log(this.params.honorName)
      if (this.params.honorName) {
        var result = await Api.getHonorList(data, this.params)
      } else {
        var result = await Api.getHonorList(data)
      }
      if (result.code === 200) {
        let res = result.data.honorInfo;
        let dataObj = {
          dataList: res.records,
          currentPage: this.currentPage,
        }
        const list = []
        list.push(
          dataObj
        )
        console.log(dataObj);
        //后台拿到的数据
        this.pageTotal = res.pages
        //获取对应页数的内容
        this.dataList = res.records
        //调用页码数
        this.pageBarList = this.calcPageNum()
        console.log(this.pageBarList)
      }
    },
    calcPageNum() {
      let pageTotal = this.pageTotal;
      //获取最大页码数
      let cur = this.currentPage;
      //获取当前页码数
      if (pageTotal < 7) {
        //判断什么时候正常显示
        return pageTotal;
      } else {
        //出翔省略号
        if (cur < 4) {
          //判断当前的页码数是否小于4如果小于4 前四个正常显示，从第五个出现...
          return [1, 2, 3, 4, "后", pageTotal];
        } else if (cur > pageTotal - 4) {
          //判断是否在1后面出现...
          return [
            1,
            "前",
            pageTotal - 4,
            pageTotal - 3,
            pageTotal - 2,
            pageTotal - 1,
            pageTotal,
          ];
        } else {
          //两种情况都不存在就说明当前点击的中间的
          return [1, "前", cur - 1, cur, cur + 1, "后", pageTotal];
        }
      }
    }
  },
}

</script>

<style scoped>
.single-blog-inner .post-image img {
  width: 770px !important;
  height: 415px;
  object-fit: contain;
}

.name {
  color: #4698ff;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}

.container {
  /*display: flex;*/
}
</style>
